<template>
  <div id="user-add">
    <!--pages/customerNote/customerNote.wxml-->
    <view id="customer-note">
      <view class="cell-title">
        单位名称
      </view>
      <van-cell-group>
        <van-field :value="form.name" placeholder="请输入单位名称"  clearable @change="changeForm" data-name="name">
        </van-field>
      </van-cell-group>
      <view class="cell-title">
        创建人
      </view>
      <van-cell-group>
        <van-field :value="form.cratorName" placeholder="请输入创建人"  clearable @change="changeForm" data-name="cratorName">
        </van-field>
      </van-cell-group>
      <view class="cell-title">
        单位图片
      </view>
      <van-cell-group>
        <van-field :value="form.logoUrl" placeholder="请输入单位图片地址"  clearable @change="changeForm" data-name="logoUrl">
        </van-field>
      </van-cell-group>
      <view class="cell-title">
        单位介绍
      </view>
      <van-cell-group>
        <van-field :value="form.remark" placeholder="请输入单位介绍"  clearable @change="changeForm" data-name="remark" type="textarea" autosize>
        </van-field>
      </van-cell-group>
      <view class="button-area">
        <van-button class="tag-btn" round @click="cancelPage">
          取消
        </van-button>
        <van-button type="primary" class="tag-btn" round :loading="loading" @click="submitForm" loading-text="保存中...">
          确定
        </van-button>
      </view>
    </view>
  </div>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import { formValidate, goCancel } from "@/static/utils";
import {reqAddCompany} from "../../api/user";

export default {
  name: "companyPublish",
  data () {
    return {
      form: {
        remark: '',
        name: '',
        logoUrl: '',
        cratorName: ''
      },
      loading: false,
      showSex: true,
      columns: ['男', '女'],
      fileList: []
    }
  },
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog
  },
  methods: {
    changeForm (e) {
      const name = e.currentTarget.dataset.name;
      this.form[name] = e.detail;
    },
    confirmSelectType (e) {
      const { value } = e.detail;
      const index = e.currentTarget.dataset.index;

      if (index === '1'){
        this.form.gender = value;
        this.$refs.popup.close()
      } else {
        this.form.home = value;
        this.$refs['popup-home'].close()
      }
    },
    showOrHidePicker (e) {
      const index = e.currentTarget.dataset.index;

      if (index === '1'){
        this.$refs.popup.close()
      } else {
        this.$refs['popup-home'].close()
      }
    },
    onClose () {
      this.$refs.popup.close()
    },
    afterRead (e) {
      console.log(e, 888)
      const { file } = e.detail;
      const that = this;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      uni.uploadFile({
        url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
          // 上传完成需要更新 fileList
          const { fileList = [] } = that;
          fileList.push({ ...file, url: res.data });
        },
      })
    },
    showPop (e) {
      const index = e.currentTarget.dataset.index;

      if (index === '1'){
        this.$refs.popup.open()
      } else {
        this.$refs['popup-home'].open()
      }
    },
    submitForm () {
      const formData = [{
        name: 'name',
        label: '单位名称'
      }, {
        name: 'logoUrl',
        label: '单位图片'
      }, {
        name: 'cratorName',
        label: '创建人'
      }, {
        name: 'remark',
        label: '单位介绍'
      }];
      var flag = formValidate(this.form, formData, 'required')

      if (!flag){
        return false;
      }
      reqAddCompany({
        name: this.form.name,
        logoUrl: this.form.logoUrl,
        description: this.form.remark,
        cratorName: this.form.cratorName
      }).then(() => {
        uni.showToast({
          title: '添加单位成功!',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1000)
      })
    },
    cancelPage () {
      goCancel()
    }
  }
}
</script>

<style lang="less">
/* pages/customerNote/customerNote.wxss */
#customer-note {
  background: #F2F2F2;
  .van-hairline, .van-hairline--bottom, .van-hairline--left, .van-hairline--right, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom{
    background: #ffffff;
  }
}
#customer-note  .van-field__body--textarea.van-field__body--ios {
  margin-top: 0;
}
#customer-note .cell-title {
  padding: 0.3rem 0.5rem;
  text-align: left;
  font-size: 28rpx;
  color: #828283;
}
#customer-note .save-btn {
  padding: 0.8rem 0.6rem;
}
#customer-note .button-area {
  padding: 0.4rem 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #FFFFFF;
  box-shadow: 0px 0px 1px 0px #333333;
  position: fixed;
  bottom: 0;
}
#customer-note .button-area .tag-btn {
  margin: 0 0.6rem;
  border-radius: 4px;
}

#customer-note .button-area .van-button{
  width: 300rpx !important;
}
#customer-note .button-area .van-button--primary {
  background: #4791F4;
  border: 1px solid #4791F4;
}
/*# sourceMappingURL=home.css.map */
</style>